<template>
  <view class="photoAlbum-item" @click.stop="toDetails">
    <view class="photoAlbum-item--header">
      <view class="header-top">
        <view class="header-title text-overflow-1">{{ item.name }}</view>
        <!-- <view class="header-edit" @click="toEdit">
          <view class="ali-icon">&#xe8ac;</view>
          <text>编辑相册</text>
        </view> -->
      </view>
      <view class="header-time">{{ formatToDate(item.publishTime, 'YYYY年MM月DD日') }}</view>
    </view>
    <view class="cover-img">
      <TImage
        :src="item.originalCoverUrl || item.coverUrl"
        width="690rpx"
        height="552rpx"
        mode="aspectFill"
      ></TImage>
    </view>
    <view class="photo-list">
      <template v-for="(v, i) in item.coverPhotoList" :key="i">
        <view class="photo-item">
          <view v-if="i === 2" class="photo-item_mask">
            <text>{{ item.photoAlbumNum }}+</text>
          </view>
          <TImage :src="v" width="220rpx" height="140rpx" mode="aspectFill"></TImage>
        </view>
      </template>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { type PhotoAlbumListResult } from '@/api/photoAlbum/types';
  import { formatToDate } from '@/utils/dateUtil';
  import { type PropType } from 'vue';
  import TImage from '@/components/TImage/index.vue';
  import { navigateTo } from '@/router';

  const props = defineProps({
    item: {
      type: Object as PropType<PhotoAlbumListResult>,
      required: true,
    },
  });

  function toEdit() {}

  function toDetails() {
    const { id, coverUrl, name, createTime, desc } = props.item;
    navigateTo({
      name: 'photoAlbumDetails',
      options: {
        id,
      },
    });
  }
</script>

<style lang="scss" scoped>
  .photoAlbum-item {
    padding: 30rpx;
    margin-top: 30rpx;
    background-color: #fff;
    &--header {
      margin-bottom: 30rpx;
      .header-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 28rpx;
        color: #333;
        .header-title {
          flex: 1;
          margin-right: 20rpx;
        }
        .header-edit {
          color: #3762e1;
          display: flex;
          align-items: center;
          justify-content: center;
          .ali-icon {
            margin-right: 10rpx;
          }
        }
      }
      .header-time {
        color: #aaabab;
        font-size: 24rpx;
      }
    }

    .cover-img {
      margin-bottom: 30rpx;
    }

    .photo-list {
      display: flex;
      align-items: center;
      .photo-item {
        margin-right: 20rpx;
        position: relative;
        &_mask {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          background-color: rgba($color: #000000, $alpha: 0.5);
          z-index: 99;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #fff;
          font-size: 27rpx;
        }
      }
    }
  }
</style>
